<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 20px;
      font-size: 14px;
    }

    input,
    select,
    button {
      padding: 0;
      font-family: inherit;
      font-size: inherit;
      height: 28px;
      padding: 0 8px;
    }

    select,
    input {
      width: 160px;
    }

    table {
      border-collapse: collapse;
    }

    table th,
    table td {
      padding: 10px;
      border: 1px solid #999;
    }
  </style>
  <h1>学生成绩管理</h1>
  <p>
    选择日期：<select id="spaceTime" onchange="query(this,'space')">
      <option value="">请选择</option>
      <option value="day">查询一天内数据</option>
      <option value="week">查询一周内数据</option>
      <option value="month">查询一月内数据</option>
    </select>
  </p>

  <p>
    起始日期：<input id="startDate" type="date"> 结束日期：<input id="endDate" type="date"> <button id="searchBtn">查询</button>
  </p>

  <table border="1" cellspacing="0" cellpadding="5" width="550">
    <thead>
      <tr>
        <th width="100">学号</th>
        <th>姓名</th>
        <th>得分</th>
        <th width="150">日期</th>
      </tr>
    </thead>
    <tbody id="tbody"></tbody>
  </table>

  <script>
    var data = [
      { id: 1, name: '立豪', score: 76, date: '2021-9-9' },
      { id: 2, name: '李四', score: 86, date: '2021-9-6' },
      { id: 3, name: '龚贤', score: 66, date: '2021-9-8' },
      { id: 4, name: '玉敏', score: 96, date: '2021-8-3' },
      { id: 5, name: '仁前', score: 86, date: '2021-6-4' },
      { id: 6, name: '志远', score: 56, date: '2021-7-5' },
      { id: 7, name: '银标', score: 86, date: '2021-9-10' },
      { id: 8, name: '徐辉', score: 66, date: '2021-7-28' },
      { id: 9, name: '智强', score: 96, date: '2021-8-15' },
      { id: 10, name: '瑞玲', score: 86, date: '2021-8-26' },
    ];
    query();

    function query(select, type) {
      var day1 = 1000 * 60 * 60 * 24;
      var week1 = day1 * 7;
      var month1 = day1 * 30;
      var timetype = select ? select.value : ''
      var startDate = document.getElementById('startDate').value;
      var startDateTime = new Date(startDate).getTime() - 1 || 0;
      var endDate = document.getElementById('endDate').value;
      var endDateTime = new Date(endDate).getTime() || 0;
      if (type === 'space') {
        document.getElementById('startDate').value = '';
        document.getElementById('endDate').value = '';
      }
      document.getElementById('tbody').innerHTML = data.filter(function (item) {
        var now = Date.now()
        var time = Date.parse(item.date)
        var space = now - time;
        if (timetype === 'day') {
          return space > 0 && space < day1;
        } else if (timetype === 'week') {
          return space > 0 && space < week1;
        } else if (timetype === 'week') {
          return space > 0 && space < month1;
        }else if(startDateTime > 0 && endDateTime > 0){
        return time >= startDateTime && time <= endDateTime; 
        }else {
          return true;
        }
      }).reduce(function (temp, item) {
        return temp + `
      <tr align="center">
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.score}</td>
        <td>${item.date}</td>
      </tr>
      `;
      }, '') || '<tr align="center"><td colspan="4">暂无数据！</td></tr>';
    }
    document.getElementById('searchBtn').onclick = function () {
      document.getElementById('spaceTime').selectedIndex = 0;
      query();
    }

  </script>

</html>